<template>
  <dir class="header">
    <Header />
  </dir>
  <div class="carousel-toos">
    <CarouselToos />
  </div>
  <div class="menu-list">
    <div class="menu-item" @click="goMenyOne">IT·互联网</div>
    <div class="menu-item" @click="goMenyTwo">办公·技能</div>
    <div class="menu-item" @click="goMenyThree">电商·营销</div>
    <div class="menu-item" @click="goMenyFour">自媒体·创作</div>
  </div>
  <div class="content">
    <div class="content-item">
      <div class="content-item-header"><h1>IT·互联网</h1></div>
      <div class="content-item-nav">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="产品经理" name="first">
            <div class="pane-box">
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/PM01.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/PM02.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/PM03.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/PM04.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="前端开发" name="second">
            <div class="pane-box">
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/font-end01.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/font-end02.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/font-end03.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
              <div class="pane-content">
                <div class="pane-content-img">
                  <img src="../assets/font-end04.jpg" alt="" />
                </div>
                <div class="pane-content-title">互联网产品经理</div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">共七节课 | 已完结</div>
                  <div class="pane-content-detail-item exchange-points">2积分</div>
                </div>
                <div class="pane-content-detail">
                  <div class="pane-content-detail-item">资源分享平台</div>
                  <div class="pane-content-detail-item">651人看过</div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="后端开发" name="third">后端开发</el-tab-pane>
          <el-tab-pane label="UI设计" name="fourth">UI设计</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "../components/Header.vue";
import CarouselToos from "../components/CarouselTool.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
let activeName = ref("first");

const router = useRouter();
//路由跳转
function goMenyOne() {
  router.push("/menu-one");
}
function goMenyTwo() {
  router.push("/menu-two");
}
function goMenyThree() {
  router.push("/menu-three");
}
function goMenyFour() {
  router.push("/menu-four");
}
function handleClick(tab: any, event: any) {
  console.log(tab, event);
}
</script>

<style scoped lang="less">
.header {
  width: 100%;
  padding: 0;
  margin: 0;
}
.carousel-toos {
  width: 100%;
  height: 300px;
  border-color: #59acf1;
}
.menu-list {
  width: 100%;
  z-index: 999;
  padding: 20px 200px;
  box-sizing: border-box;
  display: flex;
  margin: 0 auto;
  background-color: #fff;
  justify-content: space-between;

  .menu-item {
    width: 260px;
    height: 90px;
    border-radius: 3px;
    line-height: 90px;
    text-align: center;
    color: white;
    font-size: 22px;
  }
  .menu-item:nth-of-type(1) {
    background-color: #59acf1;
  }
  .menu-item:nth-of-type(2) {
    background-color: #f1c258;
  }
  .menu-item:nth-of-type(3) {
    background-color: #47009b;
  }
  .menu-item:nth-of-type(4) {
    background-color: #19c912;
  }
}
.content {
  width: 100%;
  padding: 20px 200px;
  box-sizing: border-box;
  background-color: #fff;
  .content-item {
    width: 100%;
    background-color: #fff;
    .content-item-header {
      font-size: 28px;
    }
    .content-item-nav {
      width: 100%;
      font-size: 18px;
      margin-top: 10px;
      ::v-deep .el-tabs__item {
        font-size: 20px !important;
      }
      .pane-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .pane-content {
          width: 24%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          padding: 5px;
          box-sizing: border-box;
          border-radius: 10px;
          box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
          .pane-content-img {
            .pane-content-img img {
              border-radius: 10px;
            }
          }
          .pane-content-title {
            width: 100%;
            padding: 0 20px 20px 20px;
            font-size: 22px;
            box-sizing: border-box;
            margin: 15px 0 10px 0;
            border-bottom: 1px solid #e7e6e6;
          }
          .pane-content-detail {
            width: 100%;
            padding: 0 20px;
            margin: 10px 0;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            .exchange-points{
              color:#1FD66D;
            }
          }
        }
      }
    }
  }
}
</style>
